<!-- src/components/user/UserHeader.vue -->
<template>
    <div class="header-section">
      <div class="avatar-container">
        <el-avatar 
          :size="100" 
          :src="userInfo.avatarUrl" 
          @click="$emit('avatar-click')"
        />
        <el-button 
          class="change-avatar" 
          type="primary" 
          link
          @click="$emit('avatar-click')"
        >
          更换头像
        </el-button>
      </div>
      <div class="basic-info">
        <h2>{{ userInfo.username }}</h2>
        <p class="user-role">{{ userInfo.isAdmin ? '管理员' : '普通用户' }}</p>
      </div>
    </div>
  </template>
  
  <script setup>
  defineProps({
    userInfo: {
      type: Object,
      required: true
    }
  })
  
  defineEmits(['avatar-click'])
  </script>
  
  <style scoped>
  .header-section {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
  }
  
  .avatar-container {
    text-align: center;
    margin-right: 30px;
  }
  
  .change-avatar {
    margin-top: 10px;
  }
  
  .basic-info {
    flex: 1;
  }
  
  .basic-info h2 {
    margin: 0 0 10px 0;
  }
  
  .user-role {
    color: #909399;
    margin: 0;
  }
  </style>